<template>
  <el-dialog :visible="openProductInfo" @close="close">
    <span slot="title" class="dialog-title">
      <span class="title">商品管理</span>
      <span class="blue-link refresh" @click="refresh">刷新</span>
      <el-button class="rt search-btn" type="default" @click="loadData">查询</el-button>
      <el-input v-model="productId" class="rt search-ipt" clearable placeholder="请输入商品id" />
    </span>

    <el-table v-loading="loading" :data="productListData">
      <el-table-column property="spuNo" label="商品ID" />
      <el-table-column property="spuName" label="商品名称" />
      <el-table-column property="tagList" label="商品标签" />
      <el-table-column property="stockNum" label="剩余库存" />
      <el-table-column property="status" label="状态" />
      <el-table-column label="宣传语">
        <template slot-scope="scope">
          <el-input v-model="scope.row.spuSlogan" />
        </template>
      </el-table-column>
      <el-table-column label="角标">
        <template slot-scope="scope">
          <el-input v-model="scope.row.cornerMark" />
        </template>
      </el-table-column>
      <el-table-column width="65" label="排序">
        <template slot-scope="scope">
          <el-input-number
            ref="refs"
            v-model="scope.row.sortNum"
            style="width:100%"
            :step="1"
            step-strictly
            :controls="false"
            :min="0"
            :max="999999999"
          />
        </template>
      </el-table-column>
      <el-table-column label="自定义价格">
        <template slot-scope="scope">
          <el-input v-model="scope.row.spuPrice" />
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <span class="blue-link fl" @click="download">导出上传的商品列表</span>
      <el-button type="primary" @click="upload">更新</el-button>
    </span>
  </el-dialog>
</template>

<script>
import $ from 'jquery'
import PageServer from '~/servers/page'

export default {
  name: 'ProductInfo',
  props: {
    openProductInfo: {
      type: Boolean,
      required: true
    },
    requestObj: {
      type: Object,
      required: true
    }
  },
  data: () => {
    return {
      loading: true,
      productId: '',
      productListData: []
    }
  },
  watch: {
    openProductInfo(value) {
      value && this.loadData()
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    loadData() {
      this.loading = true
      PageServer.queryGoodsInfo(
        Object.assign(this.requestObj, { spuNo: this.productId })
      ).then(
        res => {
          this.loading = false
          this.productListData = res.data
        },
        error => {
          this.loading = false
          this.$message({
            type: 'warning',
            message: error.message
          })
        }
      )
    },
    refresh() {
      this.productId = ''
      this.loadData()
    },
    download() {
      let form = $('<form>')
      form.attr('style', 'display:none')
      form.attr('target', '')
      form.attr('method', 'post')
      form.attr('action', '/activitySpu/downloadGoodsList')
      form.attr('accept-charset', 'UTF-8')
      form.attr('enctype', 'multipart/form-data')

      for (let key in this.requestObj) {
        let input = $('<input>')
        input.css('type', 'hidden')
        input.attr('name', key)
        input.attr('value', this.requestObj[key])
        form.append(input)
      }

      $('body').append(form)
      form.submit()
      form.remove()
    },
    upload() {
      let _root_ = this.productListData.map(
        ({ id, sortNum, spuPrice, spuSlogan,cornerMark }) => {
          return { id, sortNum, spuPrice, spuSlogan,cornerMark,activityCode:this.requestObj.activityCode,moduleCode:this.requestObj.moduleCode }
        }
      )

      PageServer.updateActivitySpu(_root_).then(() => {
        this.$message({
          type: 'success',
          message: '更新成功'
        })
        this.loadData()
        this.$emit('updateProductList')
      },
      error => {
        this.$message({
          type: 'warning',
          message: error.message
        })
      }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.el-dialog__header {
  padding: 1rem 0.4rem 0.2rem;
}
.fl {
  float: left;
}
.rt {
  float: right;
  &.search-btn {
    margin-right: 20px;
  }
  &.search-ipt {
    width: 220px;
    margin-right: 20px;
  }
}
.dialog-title {
  line-height: 30px;
  .refresh {
    cursor: pointer;
    margin-left: 30px;
  }
}
.title {
  font-size: 22px;
}
</style>
